<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css"/>
</head>
<body>
<div id="app">
    <div id="login_header">
        <a href="../../index.html">
            <img class="logo_img" alt="" src="../../static/img/logo.gif"/>
        </a>
    </div>

    <div class="login_banner">
        <div id="l_content">
            <span class="login_word">欢迎登录</span>
        </div>

        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="tit">
                        <h1>尚硅谷会员</h1>
                    </div>
                    <div class="msg_cont">
                        <b></b>
                        <span class="errorMsg">{{loginMsg}}</span>
                    </div>
                    <div class="form">
                        <form action="login_success.html">
                            <label>用户名称：</label>
                            <input
                                    class="itxt"
                                    type="text"
                                    placeholder="请输入用户名"
                                    autocomplete="off"
                                    tabindex="1"
                                    name="username"
                                    id="username"
                                    v-model="username"
                            />
                            <br/>
                            <br/>
                            <label>用户密码：</label>
                            <input
                                    class="itxt"
                                    type="password"
                                    placeholder="请输入密码"
                                    autocomplete="off"
                                    tabindex="1"
                                    name="password"
                                    id="password"
                                    v-model="password"
                            />
                            <br/>
                            <br/>
                            <input type="submit" value="登录" id="sub_btn" @click="checkLogin($event)"/>
                        </form>
                        <div class="tit">
                            <a href="regist.html">立即注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
</div>
</body>

<script type="text/javascript" src="../../static/script/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            "username": "",
            "password": "",
            "loginMsg": "请输入用户名和密码",
        },
        methods: {
            checkLogin($event) {
                if (this.username == "") {
                    this.loginMsg = "用户名不能为空，请重新输入！";
                    $event.preventDefault();
                }
                if (this.password == "") {
                    this.loginMsg = "密码不能为空，请重新输入！";
                    $event.preventDefault();
                }
            }
        },
    });
</script>
</html>
